
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0; font-size:14px}
    #box{ width:500px; margin:100px auto}
    table,th,td{ border:1px solid #000; border-collapse:collapse}
    td,th{ width:100px; height:30px; padding:10px}
    input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
    tbody tr td:first-child{text-align: center;}
    tfoot td{text-align: right;}
    .editBtn{ color:#666}
    .delBtn{ color:red}
    .okBtn,.cancelBtn{ display:none}
    
    .edit span{ display:none}
    .edit input[type="text"]{ display:inline-block}
    .edit .editBtn,.edit .delBtn{ display:none}
    .edit .okBtn,.edit .cancelBtn{ display:inline}
    </style>
    
    </head>
    
<body>
<div id="box">
    <table>
    <thead>
        <tr>
                <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>编辑</th>
            </tr>
    </thead>
        <tbody>
            <tr>
            <td><input type="checkbox" class="check"/></td>
                <td><span>张三</span><input type="text"></td>
                <td><span>18</span><input type="text"></td>
                <td><span>1</span><input type="text"></td>
                <td>
                <a href="javascript:;" class="editBtn">编辑</a>
                <a href="javascript:;" class="okBtn">确定</a>
                <a href="javascript:;" class="cancelBtn">取消</a>
                <a href="javascript:;" class="delBtn">删除</a>
                </td>
    
            </tr>
            <tr>
            <td><input type="checkbox" class="check"/></td>
                <td><span>李四</span><input type="text"></td>
                <td><span>25</span><input type="text"></td>
                <td><span>2</span><input type="text"></td>
                <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
    
            </tr>
            <tr>
            <td><input type="checkbox" class="check"/></td>
                <td><span>小强</span><input type="text"></td>
                <td><span>22</span><input type="text"></td>
                <td><span>3</span><input type="text"></td>
                <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
    
            </tr>
            <tr>
            <td><input type="checkbox" class="check"/></td>
                <td><span>小明</span><input type="text"></td>
                <td><span>16</span><input type="text"></td>
                <td><span>4</span><input type="text"></td>
                <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
    
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <td colspan="5">总价：￥<b id="money"></b></td>
            </tr>
        </tfoot>
    </table>
</div>

<script>
    var editBtns = document.querySelectorAll(".editBtn")
    var okBtns = document.querySelectorAll(".okBtn")
    var cancelBtns = document.querySelectorAll(".cancelBtn")
    var delBtns = document.querySelectorAll(".delBtn")
    var selects = document.querySelectorAll(".check")
    var allCheck = document.querySelector("#allCheck")
    var prices = document.querySelectorAll("tbody tr td:nth-child(3) span") 
    var money = document.querySelector("#money")
    var num = 0;
    //编辑
    Array.from(editBtns).forEach(function(btn){
        btn.onclick = function(){
            var tr = btn.parentNode.parentNode
            tr.className = "edit"
            var spans = tr.querySelectorAll("td span")
            Array.from(spans).forEach(function(span){
                span.nextElementSibling.value = span.innerHTML
            })
            fn()
        }
    })
    //确认
    Array.from(okBtns).forEach(function(btn){
        btn.onclick = function(){
            var tr = btn.parentNode.parentNode
            tr.className = ""
            var spans = tr.querySelectorAll("span")
            Array.from(spans).forEach(function(span){
                span.innerHTML = span.nextElementSibling.value
            })
            fn()
        }
    }) 
    //取消
    Array.from(cancelBtns).forEach(function(cancelBtn){
        cancelBtn.onclick = function(){
           var tr = cancelBtn.parentNode.parentNode
           tr.className = ""
        }
    })
    //删除
    Array.from(delBtns).forEach(function(delBtn){
        delBtn.onclick = function(){
            var tr = delBtn.parentNode.parentNode
            if(confirm("确认要删除？")){
                tr.parentNode.removeChild(tr)
                selects = document.querySelectorAll(".check")
                prices = document.querySelectorAll("tbody tr td:nth-child(3) span") 
                //删除后须要判断是不是所有的都选中
                var is = Array.from(selects).every(function(item,index){
                return item.checked === true
                })

                if (is){
                    allCheck.checked = true
                }else{
                    allCheck.checked = false
                }

                num = 0
                for(var key in Array.from(selects)){
                    if(Array.from(selects)[key].checked){
                        num ++
                    }
                }
               fn()
            }
            
        }
        
    })
  
    //全选  

    allCheck.onchange = function(){
        Array.from(selects).forEach(function(select){
        select.checked = allCheck.checked
        })

        if(allCheck.checked){
            num = selects.length;
        }else{
            num = 0;
        }
        fn()
    }

    Array.from(selects).forEach(function(select){
        select.onchange = function(){
            if(select.checked){
                num++
            }else{
                num--
            }
            if(num == selects.length){
                allCheck.checked = this.checked
            }else{
                select.checked ? allCheck.checked !=this.checked : allCheck.checked = this.checked
            }
         fn()
        }
    })

    //总价        
    function fn(){
        var one = 0
        selects = document.querySelectorAll(".check")
        prices = document.querySelectorAll("tbody tr td:nth-child(3) span")
        var geshu = document.querySelectorAll("tbody tr td:nth-child(4) span")
        Array.from(selects).forEach(function(item,index){
           if(item.checked){
            var num = prices[index].innerHTML*geshu[index].innerHTML
            one += num
           }
        })
        money.innerHTML = one
    }
</script>
</body>
</html>
